<template>
  <div class="content-box">
    <nav-title title="测评评估" :routerLink="routerLink" />
    <!-- 基本信息 -->
    <div class="regulations-box">
      <div class="title">基本信息</div>
      <div class="information">
        <div class="info-cell clearfix">
          <label class="label">员工ID</label>
          <span class="value">{{allinfo.emplid}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">姓名</label>
          <span class="value">{{allinfo.name}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">部门</label>
          <span class="value">{{allinfo.dept}}</span>
        </div>
        <div class="info-cell clearfix">
          <label class="label">岗位</label>
          <span class="value">{{allinfo.jobDescr}}</span>
        </div>
      </div>
    </div>

    <div class="regulations-box problem-box">
      <div class="title">测评评估</div>
      <div class="information">
        <h2>{{allinfo.title}}</h2>
        <p v-html="allinfo.comments"/>
      </div>
      <div class="problem-list-box" v-for="item, index in allinfo.docSecs">
        <h2>{{item.title}}</h2>
        <div class="problem-list" v-for="value, num in item.ques">
          <h3>{{value.descr}} <span v-if="value.method == 'A'">单选题</span><span v-else-if="value.method == 'B'">多选题</span></h3>
          <p v-html="value.detailDescr" />
          <p v-html="value.description" />
          <group v-if="value.method == 'C'">
            <x-textarea v-if="!edit" :disabled="true" v-model="value.answer" :max="200" placeholder="请在这里输入..."/>
            <x-textarea v-else="" :max="200" placeholder="请在这里输入..." @on-change="textareaChange(index, num, $event)"/>
          </group>
          <checklist v-else-if="!edit" :disabled="true" required :value="value.answer" :max="value.method == 'B' ? value.queGds.length : 1 " :options="value.queGds"/>
          <checklist v-else="" required :max="value.method == 'B' ? value.queGds.length : 1 " :options="value.queGds" @on-change="selectChange(index, num, $event)"/>
        </div>
      </div>
      <button v-if="edit" @click="submit">提交</button>
    </div>
  </div>
</template>

<script>
import { getExamInfo, saveScore } from "../../api/api";
import { Checklist, XTextarea, Group } from "vux";
import qs from "qs";

export default {
  name: "EvaluationAssess",
  components: {
    Checklist,
    XTextarea,
    Group
  },
  created() {
    this.routerLink = this.$route.query.routerLink;
    this.oprid = this.$route.query.oprid;
    this.docid = this.$route.query.docid;
    this.sheetid = this.$route.query.sheetid;
    this.getData();
    if (this.$route.query.assessFlag == "C") {
      this.edit = false;
    }
  },
  mounted() {},
  data() {
    return {
      routerLink: "",
      oprid: "",
      docid: "",
      sheetid: "",
      allinfo: {},
      answer: [],
      edit: true
    };
  },
  methods: {
    getData() {
      this.$vux.loading.show();
      let params = {
        oprid: this.oprid,
        docid: this.docid,
        sheetid: this.sheetid
      };
      getExamInfo(params)
        .then(res => {
          this.$vux.loading.hide();
          if (res && res.retCode === "000000") {
            this.allinfo = res.retData;
            res.retData.docSecs &&
              res.retData.docSecs.map(item => {
                this.role = res.retData.role;
                this.evaluator = res.retData.evaluator;
                const answerChildArr = [];
                item.ques &&
                  item.ques.map(value => {
                    const arr = [];
                    value.queGds.map(val => {
                      val.key = `${val.grade}+${val.score}`;
                      val.value = val.item;
                      arr.push(val);
                    });
                    if (!value.answer) {
                      value.answer = '';
                    } else if (typeof(value.answer) != "string") {
                      const answerArr = [];
                      value.answer && value.answer.map(val => {
                        value.queGds.map(project => {
                          if (project.grade == val) {
                            answerArr.push(
                              `${project.grade}+${project.score}`
                            );
                          }
                        });
                      });
                      value.answer = answerArr;
                    }

                    value.queGds = arr;
                    const obj = {
                      secSeq: value.secSeq,
                      queid: value.queid,
                      method: value.method,
                      score: "",
                      selected: ""
                    };
                    answerChildArr.push(obj);
                  });
                this.answer.push(answerChildArr);
              });
          } else {
            this.$vux.alert.show({
              title: "提示",
              content: res.retMsg
            });
          }
        })
        .catch(res => {
          this.$vux.loading.hide();
          this.$vux.alert.show({
            title: "警告",
            content: "网络异常，请稍后重试"
          });
        });
    },
    selectChange(index, num, value) {
      if (value && value[0] && this.answer[index][num].method == "A") {
        this.answer[index][num].selected = value[0].split("+")[0];
        this.answer[index][num].score = value[0].split("+")[1];
      }
      if (value && value[0] && this.answer[index][num].method == "B") {
        let score = 0;
        let selected = "";
        value.map(item => {
          score += item.split("+")[1] / 1;
          selected += item.split("+")[0] + "@";
        });
        this.answer[index][num].selected = selected.substring(
          0,
          selected.length - 1
        );
        this.answer[index][num].score = score;
      }
    },
    textareaChange(index, num, value) {
      this.answer[index][num].selected = value;
    },
    submit() {
      const arr = [];
      this.answer.map(item => {
        item.map(val => {
          arr.push(val);
        });
      });
      let hasError = false;
      arr.map(item => {
        if (!item.selected && item.method != "C") {
          hasError = true;
        }
      });
      if (hasError) {
        return this.$vux.alert.show({
          title: "提示",
          content: "请答完所有题目后再提交"
        });
      }

      this.$vux.confirm.show({
        title: "提示",
        content: "您确认要提交？",
        onConfirm: () => {
          this.$vux.loading.show("提交中");
          const params = {
            docid: this.docid,
            role: this.role,
            evaluator: this.evaluator,
            scoreJson: JSON.stringify(arr)
          };
          saveScore(qs.stringify(params))
            .then(res => {
              this.$vux.loading.hide();
              if (res && res.retCode === "000000") {
                // this.$vux.alert.show({
                //   title: "成功",
                //   content: "提交成功",
                //   onHide: () => {
                    this.$router.go(-1);
                //   }
                // });
              } else {
                this.$vux.alert.show({
                  title: "提示",
                  content: res.retMsg
                });
              }
            })
            .catch(res => {
              this.$vux.loading.hide();
              this.$vux.alert.show({
                title: "警告",
                content: "网络异常，请稍后重试"
              });
            });
        }
      });
    }
  }
};
</script>

<style type="text/scss" lang="scss">
@import "../../styles/staff.scss";
.information {
  padding: 0 10px;
}
.regulations-box.problem-box {
  > button {
    width: 90%;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
    font-size: 18px;
    color: #fff;
    outline: none;
    margin: 20px 0 50px;
    background-color: #1caafe;
    font-weight: bold;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.34902);
  }
  > .information {
    > h2 {
      padding: 10px 0;
      font-weight: bold;
    }
    > p {
      text-align: left;
    }
  }
  .problem-list-box {
    padding: 10px;
    font-size: 14px;
    > h2 {
      font-weight: bold;
      text-align: left;
      padding: 4px 0;
    }
    .problem-list {
      > h3 {
        text-align: left;
        padding: 4px 0;
        padding-right: 10px;
        span {
          float: right;
          color: #f00;
          font-weight: normal;
        }
      }
      > p {
        text-align: left;
        padding: 4px 0;
      }
      .weui-cells_checkbox {
        .weui-cell__bd {
          font-size: 14px;
        }
      }
      .vux-x-textarea {
        border: 1px solid #ccc;
      }
    }
  }
}
</style>
